Add BrowseCLI in a Vercel Sandbox example#1517
Closed
shrey150 wants to merge 11 commits into
Closed
Conversation
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Contributor
|
@shrey150 is attempting to deploy a commit to the Vercel Examples Team on Vercel. A member of the Team first needs to authorize it. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Replace the scripted single-page demo with an AI SDK agent that runs inside the Vercel Sandbox and whose only tool is the browse CLI driving a Browserbase cloud browser. Adds agent.mjs, rewrites sandbox.ts/README/ .env.example, and removes the obsolete demo script and Next.js route. Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Contributor
|
Deployment failed with the following error: Learn More: https://vercel.com/docs/concepts/projects/project-configuration |
Use Vercel's idiomatic bash-tool pattern: the AI SDK ToolLoopAgent loop
runs on the host and its bash tool executes inside the Vercel Sandbox,
where the browse CLI drives a Browserbase cloud browser. BROWSERBASE_API_KEY
is passed via Sandbox.create({ env }) so it reaches the in-sandbox browse
commands without being written to a file. Removes the old uploaded agent.mjs.
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…arch prompt Signed-off-by: Shrey Pandya <shrey@browserbase.com>
…otes Signed-off-by: Shrey Pandya <shrey@browserbase.com>
…rect-URL/most-recent prompt nudges Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Switch the example's install/run commands to pnpm (npm i -> pnpm install, npx tsx sandbox.ts -> pnpm start) and commit a pnpm-lock.yaml, matching the convention every other solutions/ example follows (packageManager pnpm@9.13.0, committed pnpm-lock.yaml, no package-lock.json). Add just-bash as an explicit dependency: bash-tool lists it as both a regular dependency and a peerDependency, so under pnpm's strict node_modules layout it is not installed for the consumer, causing ERR_MODULE_NOT_FOUND at runtime. npm's flat layout masked this. Declaring it directly makes the example install and run correctly under pnpm. Files reformatted with prettier v2 to satisfy the repo's pre-commit hook. Signed-off-by: Shrey Pandya <shrey@browserbase.com>
Author
|
Superseded by #1524 — reworked as a full-stack deployable guide under |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds
solutions/browsecli-vercel-sandbox— a Vercel AI SDK agent that runs thebrowseCLI inside a Vercel Sandbox (an ephemeral Firecracker microVM) using Vercel'sbash-tool.The agent loop runs on the host (
ToolLoopAgentfromai). Its model (anthropic/claude-sonnet-5) is served through Vercel AI Gateway, and itsbashtool — built withcreateBashTool({ sandbox })— executes commands inside the sandbox, where thebrowseCLI is installed. The model navigates the web by emittingbrowsecommands; the browser itself runs remotely on Browserbase, so it never runs in the microVM.System prompt: small, self-discovering
The system prompt is intentionally minimal. It does not enumerate
browsesubcommands or flags — it tells the agent the CLI is installed and pre-configured, points it atbrowse --help, and lets it learn the surface itself:This keeps the example honest about how a capable model actually uses a CLI (read
--help, then go) and avoids a brittle wall of command cheatsheet text. The one piece of steering that makes the short prompt work is moved out of the prompt and into the environment — see below.Env-steering for a flag-free shared session
The sandbox is created with two default env vars:
BROWSERBASE_API_KEY— authenticatesbrowseagainst Browserbase.BROWSE_SESSION=agent— steersbrowseto run remotely and share one named browser session across commands. Because of this, the agent can just runbrowse open <url>(no--remote, no--session) and every command lands in the same cloud browser. This is what lets the prompt drop all the session/flag instructions.Model via Vercel AI Gateway (no Anthropic key)
The model is routed through Vercel AI Gateway rather than a direct Anthropic provider:
sandbox.tspasses a bareprovider/modelstring —model: 'anthropic/claude-sonnet-5'— whichai@6resolves through the default Gateway provider.@ai-sdk/anthropicdependency and theANTHROPIC_API_KEYenv var are dropped entirely.vercel env pullwrites a short-livedVERCEL_OIDC_TOKENthat the Gateway uses — so one Vercel auth covers both the Sandbox and the model. AnAI_GATEWAY_API_KEYis supported as an alternative for those who prefer a long-lived key.This removes a credential from the example: a user who is already authenticated with Vercel (to create the Sandbox) does not need a separate Anthropic account or key.
Default task
A product-research example, with no site-specific instructions in the prompt — the agent plans its own steps. On Amazon it searches for the current top mechanical keyboards and, for the top 5 results, compares each product's title, price, star rating, and number of ratings, returning a comparison table that includes each product's URL. This is a genuinely browser-only task: Amazon search renders its results client-side and returns nothing useful to a plain HTTP fetch, so the agent has to drive a real browser to get the data. Override the goal with the
TASKenv var.Contents
sandbox.ts— standalone, directly-runnable script:Sandbox.create({ runtime: 'node24' })→ installbrowsein the sandbox → build thebashtool → run aToolLoopAgent(model via AI Gateway), streaming each issuedbrowsecommand and ending with a===== FINAL ANSWER =====summary.README.md/package.json/pnpm-lock.yaml/tsconfig.json/.env.example/.gitignoreThe example uses pnpm to match the repo convention (
packageManager: pnpm@9.13.0; every activesolutions/example commits apnpm-lock.yaml). The committedpnpm-lock.yamlis generated withpnpm install; install/run commands in the README arepnpm install/pnpm start.Required env
BROWSERBASE_API_KEY— the cloud browser.VERCEL_TOKEN/VERCEL_TEAM_ID/VERCEL_PROJECT_ID— Vercel Sandbox auth.VERCEL_OIDC_TOKEN(keyless;vercel link+vercel env pull .env.local) orAI_GATEWAY_API_KEY. NoANTHROPIC_API_KEY.E2E Test Matrix
Run against the exact committed code (
sandbox.ts@ this branch) on real Vercel cloud: a freshly provisioned Firecracker microVM,browseCLI installed in-sandbox,ToolLoopAgentloop on the host, modelanthropic/claude-sonnet-5served through AI Gateway. The model run env was asserted at preflight to contain noANTHROPIC_API_KEYand noAI_GATEWAY_API_KEY— onlyVERCEL_OIDC_TOKEN(keyless OIDC).pnpm installin the example dir, thenpnpm starton real Vercel cloud, minimal prompt +BROWSE_SESSION=agentenv-steering, model via AI Gateway, run env asserted to have no Anthropic key and no Gateway key (pureVERCEL_OIDC_TOKEN)pnpm installresolved against the committedpnpm-lock.yaml; the run provisioned a new sandbox, agent ranbrowse --helpfirst, then issued onlybrowsesubcommands (browse open/browse snapshot/browse eval) with no--remote/--sessionflags — 12bashtool calls, allbrowse, zerocurl/wget/fetch— completed in 13 agent steps, and ended with===== FINAL ANSWER =====plus a 5-product comparison table (title, price, star rating, # of ratings, and anamazon.com/dp/...URL for each)browsevia--help, theBROWSE_SESSIONenv var alone gives a flag-free shared remote session, andanthropic/claude-sonnet-5is served through AI Gateway authenticated only by the Vercel OIDC token. The agent drove a real browser (no HTTP-fetch shortcut was even possible — Amazon search results are client-rendered)node_modulesresolution (the reasonjust-bashis now a direct dependency)just-bashdeclared,pnpm startfailed immediately withERR_MODULE_NOT_FOUND: Cannot find package 'just-bash' imported from …/bash-tool/dist/tools/bash.js.bash-toollistsjust-bashas both a regular dependency and a peerDependency, so pnpm does not install it for the consumer (npm's flat layout had masked this). Adding"just-bash": "^3.0.1"to the example'sdependenciesresolved it; the subsequentpnpm startis the passing run above.just-bashdep are both load-bearing for the repo's pnpm conventionamazon.com, the search results page, and an individual/dp/product page with no challenge, robot-check, or "enter the characters" interstitial in the run lognpx --no-install tsc --noEmit(against pnpm-installednode_modules)Type of Change
New Example Checklist
npm run new-examplewas used to create the example.env.example+ setup instructions, README,.gitignore; uses pnpm with a committedpnpm-lock.yamlper repo convention)This PR is intentionally a draft. Opening for early visibility / format review before marking ready.